<h1>Logs</h1>
<p>This page allows you to view the logs in the past {{ LOGS_RETENTION_PERIOD_IN_DAYS }} days.</p>
<button (click)="switchView()" *ngIf="isTableView" class="btn btn-info">Switch to histogram view</button>
<button (click)="switchView()" *ngIf="!isTableView" class="btn btn-info">Switch to table view</button>
<hr/>

<div *tmIsLoading="isLoading" class="card bg-form no-border">
  <div class="card-body">
    <div class="row form-group">
      <div class="col-12 col-sm-6">
        <div class="col-12 mb-1">
          <label for="logs-from-datepicker" class="fw-bold">Search period from</label>
        </div>
        <div class="row">
          <div class="col-6">
            <div class="input-group">
              <input id="logs-from-datepicker" type="text" class="form-control" ngbDatepicker [minDate]="earliestSearchDate" [maxDate]="dateToday" [(ngModel)]="formModel.logsDateFrom" #logsFromDp="ngbDatepicker"/>
              <button class="btn btn-light input-group-text" (click)="logsFromDp.toggle()" type="button">
                <i class="fas fa-calendar-alt"></i>
              </button>
            </div>
          </div>
          <div id="logs-from-timepicker" class="col-6">
            <ngb-timepicker [(ngModel)]="formModel.logsTimeFrom" [spinners]="false"></ngb-timepicker>
          </div>
        </div>
        <div class="col-12 mb-1 mt-4">
          <label for="logs-to-datepicker" class="fw-bold">Search period until</label>
        </div>
        <div class="row">
          <div class="col-6">
            <div class="input-group">
              <input id="logs-to-datepicker" type="text" class="form-control" ngbDatepicker [minDate]="earliestSearchDate" [maxDate]="dateToday" [(ngModel)]="formModel.logsDateTo" #logsToDp="ngbDatepicker"/>
              <button class="btn btn-light" (click)="logsToDp.toggle()" type="button">
                <i class="fas fa-calendar-alt"></i>
              </button>
            </div>
          </div>
          <div id="logs-to-timepicker" class="col-6">
            <ngb-timepicker [(ngModel)]="formModel.logsTimeTo" [spinners]="false"></ngb-timepicker>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-4" *ngIf="isTableView">
        <div class="col-12">
          <label for="log-severity-radio" class="fw-bold">Log severity level / event</label>
        </div>
        <div class="form-check">
          <label class="form-check-label" id="log-severity-radio">
            <div>
              <input type="radio" class="form-check-input mt-3" name="severity" id="severity" [value]="'SEVERITY'" [(ngModel)]="filterType">
              <label for="severity">severity =&nbsp;</label>
              <select class="form-control form-select inline" [(ngModel)]="formModel.filters.severity">
                <option *ngFor="let severity of SEVERITIES" [value]="severity">{{ severity }}</option>
              </select>
            </div>
            <br>
            <div>
              <input type="radio" class="form-check-input mt-3" name="severity" id="min-severity" [value]="'MIN_SEVERITY'" [(ngModel)]="filterType">
              <label for="min-severity">severity >=&nbsp;</label>
              <select class="form-control form-select inline" [(ngModel)]="formModel.filters.minSeverity">
                <option *ngFor="let severity of SEVERITIES" [value]="severity">{{ severity }}</option>
              </select>
            </div>
            <br>
            <div>
              <input type="radio" class="form-check-input mt-3" name="severity" id="event" [value]="'EVENT'" [(ngModel)]="filterType">
              <label for="event">All event logs &nbsp;</label>
              <select class="form-control form-select inline" [(ngModel)]="formModel.filters.logEvent">
                <option *ngFor="let event of EVENTS" [value]="event">{{ event }}</option>
              </select>
            </div>
            <br>
          </label>
        </div>
      </div>
      <div class="col-2 col-sm-1 mt-1">
        <button id="query-button" class="btn btn-primary" (click)="searchForLogs()">Query</button>
      </div>
    </div>
    <div class="row form-group" *ngIf="isTableView">
      <div class="col-12">
        <div class="col-12 mb-1 mt-2">
          <button class="btn btn-success" (click)="isFiltersExpanded = !isFiltersExpanded;">
            <i [ngClass]="isFiltersExpanded ? 'fas fa-minus' : 'fas fa-plus'"></i> Advanced filters
          </button>
        </div>
      </div>
    </div>
    <div *ngIf="isFiltersExpanded && isTableView" @collapseAnim>
      <div class="row form-group mt-2">
        <div class="col-sm-6 col-12">
          <div class="col-12">
            <label for="trace-id" class="fw-bold">Trace ID</label>
            <input id="trace-id" class="form-control" [(ngModel)]="formModel.filters.traceId">
          </div>
          <div class="col-12 mt-2">
            <label for="source-file" class="fw-bold">Source location file</label>
            <input id="source-file" class="form-control col-12" [(ngModel)]="formModel.filters.sourceLocation!.file">
          </div>
        <div class="col-12 mt-2">
            <label for="source-function" class="fw-bold">Source location function</label>
            <input id="source-function" class="form-control col-12" [(ngModel)]="formModel.filters.sourceLocation!.function">
        </div>
        <div class="col-12 mt-2">
            <label for="action-class" class="fw-bold">Action class</label>
            <select id="action-class" class="form-control form-select col-12" [(ngModel)]="formModel.filters.actionClass">
              <option [value]=""></option>
              <option *ngFor="let actionClass of ACTION_CLASSES" [value]="actionClass">
                {{ actionClass }}
              </option>
            </select>
        </div>
      </div>
        <div class="col-sm-6 col-12">
          <div class="col-12">
            <label for="google-id" class="fw-bold">User Google ID</label>
            <input id="google-id" class="form-control" [(ngModel)]="formModel.filters.userInfoParams!.googleId" [disabled]="!isAdmin">
          </div>
          <div class="col-12 mt-2">
            <label for="regkey" class="fw-bold">User Registration Key</label>
            <input id="regkey" class="form-control" [(ngModel)]="formModel.filters.userInfoParams!.regkey" [disabled]="!isAdmin">
          </div>
        <div class="col-12 mt-2">
            <label for="email" class="fw-bold">User Email</label>
            <input id="email" class="form-control" [(ngModel)]="formModel.filters.userInfoParams!.email" [disabled]="!isAdmin">
        </div>
          <div class="col-12 mt-2">
            <label for="exception-class" class="fw-bold">Exception/Error class</label>
            <input id="exception-class" class="form-control" [(ngModel)]="formModel.filters.exceptionClass">
          </div>
      </div>
      <div class="row form-group mt-2">
        <div class="col-5">
          <div class="col-12">
            <label for="latency" class="fw-bold">Latency (e.g. >=60000; unit is in ms)</label>
            <input id="latency" class="form-control" [(ngModel)]="formModel.filters.latency">
          </div>
        </div>
        <div class="col-5">
          <div class="col-12">
            <label for="status" class="fw-bold">HTTP status (200, 400, 404, 500, etc.)</label>
            <input id="status" class="form-control" [(ngModel)]="formModel.filters.status">
          </div>
        </div>
        <div class="col-sm-2 col-12">
          <div class="col-12">
            <label for="version" class="fw-bold">Version</label>
            <input id="version" class="form-control" [(ngModel)]="formModel.filters.version">
          </div>
        </div>
      </div>
      <div class="row form-group mt-2">
        <div class="col">
          <div class="col-12">
            <label for="extra-filters" class="fw-bold">Extra filters</label>
            <textarea id="extra-filters" class="form-control" [(ngModel)]="formModel.filters.extraFilters" [disabled]="!isAdmin"></textarea>
          </div>
        </div>
      </div>
      <div class="col-5 mt-2">
        <button class="btn btn-danger" (click)="clearFilters()">Clear all</button>
      </div>
    </div>
  </div>
</div>

<div *ngIf="isTableView">
  <div class="center mb-4" *ngIf="hasResult && !hasPreviousPage">
    <button class="btn btn-light" (click)="extendStartTime()">Extend start time by 10 minutes</button>
  </div>
  <div *tmIsLoading="isSearching" class="center mb-4">
    <button *ngIf="hasResult && hasPreviousPage" id="load-previous-button" class="btn btn-primary" (click)="loadPreviousLogs()">Load more</button>
  </div>
  <div class="overflow-x-scroll">
    <tm-logs-table *ngIf="hasResult" [logs]="searchResults" (addTraceEvent)="addTraceToFilter($event)"
      (addActionClassEvent)="addActionClassToFilter($event)" (addExceptionClassEvent)="addExceptionClassToFilter($event)"
      (addSourceLocationEvent)="addSourceLocationToFilter($event)" (addUserInfoEvent)="addUserInfoToFilter($event)"></tm-logs-table>
  </div>
  <div *tmIsLoading="isSearchingLaterLogs" class="center mb-4">
    <button *ngIf="hasResult && hasNextPage" id="load-next-button" class="btn btn-primary" (click)="loadLaterLogs()">Load more</button>
  </div>
  <div class="center mt-4" *ngIf="hasResult && !hasNextPage">
    <button class="btn btn-light" (click)="extendEndTime()">Extend end time by 10 minutes</button>
  </div>
</div>

<div *ngIf="!isTableView">
  <div id="histogram" style="height: 400px; width: 100%;" *tmIsLoading="isSearching">
    <tm-logs-histogram [data]="histogramResult" *ngIf="histogramResult.length>0; else noDataMessage"></tm-logs-histogram>
  </div>
  <ng-template #noDataMessage>
    <div class="no-data-message">
      There are no error logs in this time period.
    </div>
  </ng-template>
</div>
